<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，A simple and flexible front-end framework。">
    <meta name="author" content="Zentao">
    <title>ZUI - Step viewer example</title>
    <link href="../../dist/css/zui.css" rel="stylesheet">
    <style>
    [data-guide-viewer]{display: none}
    .modal-lightbox .modal-dialog {min-width: 300px; min-height: 105px}
    </style>
</head>

<body style="padding: 20px">
    <div class="conatiner" id="guideViewerExample">
        <h1>Step viewer example（guideViewer）</h1>
        <h2>Fixed height：Fixed to the specified value（In the example is 500px）</h2>
        <img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="first step：This is the description of the first picture.">
        <img data-guide-viewer="2" src="../img/img2.jpg" alt="Second step：This is the description of the second step image.">
        <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="third step：This is the description of the third step image.">
        <img data-guide-viewer="2" src="../img/slide1.jpg" alt="the fourth step：This is the description of the fourth step picture.">
        <img data-guide-viewer="2" src="../img/img3.jpg" alt="the fifth step：This is the description of the fifth step picture.">
        <div data-guide-viewer="2" title="Custom content test">
            <div class="container">
                <h1>Hahaha</h1>
                <p>Custom content test:)</p>
            </div>
        </div>

        <h2>Dynamic height：Automatically apply height based on image or content</h2>
        <img data-guide-viewer="1" data-lightbox="true" src="../img/img1.jpg" alt="first step：This is the description of the first picture.">
        <img data-guide-viewer="1" src="../img/img2.jpg" alt="Second step：This is the description of the second step image.">
        <img data-guide-viewer="1" src="../img/slide1.jpg" alt="the fourth step：This is the description of the fourth step picture.">
        <img data-guide-viewer="1" src="../img/img3.jpg" alt="the fifth step：This is the description of the fifth step picture.">
        <div data-guide-viewer="1" title="Custom content test">
            <div class="container">
                <h1>Hahaha</h1>
                <p>Custom content test:)</p>
            </div>
        </div>

        <h2>Navigation on top</h2>
        <img data-guide-viewer="3" data-nav-pos="top" data-height="400" src="../img/img1.jpg" alt="first step：This is the description of the first picture.">
        <img data-guide-viewer="3" src="../img/img2.jpg" alt="Second step：This is the description of the second step image.">
        <img data-guide-viewer="3" src="../img/chanzhi_icon.png" alt="third step：This is the description of the third step image.">
        <img data-guide-viewer="3" src="../img/slide1.jpg" alt="the fourth step：This is the description of the fourth step picture.">
        <img data-guide-viewer="3" src="../img/img3.jpg" alt="the fifth step：This is the description of the fifth step picture.">
        <div data-guide-viewer="3" title="Custom content test">
            <div class="container">
                <h1>Hahaha</h1>
                <p>Custom content test:)</p>
            </div>
        </div>

        <h2>Option</h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Option</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>height</td>
                    <td>height，The default is 'auto'，You can specify a number to set a fixed height</td>
                </tr>
                <tr>
                    <td>navPos</td>
                    <td>Navigation location，default 'bottom'（Shown below），Can also be set to 'top' Set navigation above</td>
                </tr>
                <tr>
                    <td>lightbox</td>
                    <td>Whether to enable picture lightbox browsing，The default is 'false'，If set to `true`，Need image browsing plugin（$.fn.lightbox）activated</td>
                </tr>
                <tr>
                    <td>lang</td>
                    <td>Interface display language，Default auto setting</td>
                </tr>
                <tr>
                    <td>prevStep</td>
                    <td>Text displayed on the navigation：“Previous”</td>
                </tr>
                <tr>
                    <td>nextStep</td>
                    <td>Text displayed on the navigation：“Next step”</td>
                </tr>
                <tr>
                    <td>prevStepIcon</td>
                    <td>Icon displayed on the navigation：“icon-chevron-left”</td>
                </tr>
                <tr>
                    <td>nextStepIcon</td>
                    <td>Icon displayed on the navigation：“icon-chevron-right”</td>
                </tr>
                <tr>
                    <td>carousel</td>
                    <td>Set rotation options，For example, enable autoplay, etc.</td>
                </tr>
                <tr>
                    <td>slide</td>
                    <td>Whether to enable animation effects，The default is false</td>
                </tr>
            </tbody>
        </table>

        <h2>Instructions</h2>
        <pre><code>&lt;img data-guide-viewer=&quot;2&quot; data-height=&quot;500&quot; src=&quot;../img/img1.jpg&quot; alt=&quot;first step：This is the description of the first picture.&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/img2.jpg&quot; alt=&quot;Second step：This is the description of the second step image.&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/chanzhi_icon.png&quot; alt=&quot;third step：This is the description of the third step image.&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/slide1.jpg&quot; alt=&quot;the fourth step：This is the description of the fourth step picture.&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/img3.jpg&quot; alt=&quot;the fifth step：This is the description of the fifth step picture.&quot;&gt;
&lt;div data-guide-viewer=&quot;2&quot; title=&quot;Custom content test&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Hahaha&lt;/h1&gt;
        &lt;p&gt;Custom content test:)&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        <p>Set properties for step elements that belong to the same group “data-guide-viewer=*”，And the values of the attributes are consistent。</p>
        <p>Used on the first step element "data-*" To set options。</p>
    </div>

    <script src="../../assets/jquery.js"></script>
    <script src="../../dist/js/zui.js"></script>
    <script src="../../dist/lib/guideViewer/zui.guideViewer.js"></script>
</body>

</html>